<script lang="ts">
export default {
  name: 'wanderArea'
};
</script>

<script setup lang="ts">

import {
  findAppControlByTag,
  linkageControlAPP
} from '@/api/appcontrol';
import {
  sendAppControl
} from '@/api/appcontrol';

const screenData = ref([]);
let formData = {
  appId: "1",  //应用id
  appSourceType: '', //视频、图片、PPT
  sourceId: "",  //innerId
  action: '', //执行动作
  terminalType: "7",  //固定7
  instructParams: {
    id: '',
    cmd: ''
  }
}
/**
 * 查询
 */
function handleQuery() {
  findAppControlByTag({
    tag: "wanderArea"
  })
    .then((res: any) => {
      let data = res.data;
      console.log("wanderArea", data);
      formData.appId = data.tag;
      screenData.value = data;
      //   console.log(ScreenList);
    })
}

// 控制
function handleControl(type: any, serverType: any) {
  console.log("控制", type, serverType);
  // 控制设备
  let sourceId = '';
  let appSourceType = "1"
  switch (serverType) {
    case 'serverVideo':
      appSourceType = "2"
      break;
    case 'serverPPT':
      appSourceType = "3"
      break;
    case 'serverImage':
      appSourceType = "1"
      break;
    case 'serverDigiman':
      appSourceType = "4"
      break;

    default:
      break;
  }
  formData.sourceId = sourceId
  sendAppControlData(sourceId, appSourceType, serverType, {
    id: '',
    cmd: type
  })
}
//打开资源
function OpenResoure(item: any, serverType: any) {
  console.log("打开资源", item);
  let sourceId = item.innerId + '';
  let appSourceType = "1"
  switch (serverType) {
    case 'serverVideo':
      appSourceType = "2"
      break;
    case 'serverPPT':
      appSourceType = "3"
      break;
    case 'serverImage':
      appSourceType = "1"
      break;
    case 'serverDigiman':
      appSourceType = "4"
      break;
    default:
      break;
  }
  sendAppControlData(sourceId, appSourceType, serverType, {
    id: sourceId,
    cmd: "open"
  })
}
//打开数字人
function OpenDigiman(item: any) {

  let sourceId = item.innerId + '';
  let appSourceType = "4"
  sendAppControlData(sourceId, appSourceType, 'serverDigiman', {
    cmd: item.title
  })
}
// 发送指令
function sendAppControlData(sourceId: any, appSourceType: any, serverType: any, data: any) {

  formData.action = serverType
  formData.instructParams = data
  formData.appSourceType = appSourceType
  formData.sourceId = sourceId
  sendAppControl(formData).then((res: any) => {
    try {
      ElMessage.success(res.data.message);
    } catch (error) {
      ElMessage.error("调用失败！");
    }
  })
}

//设备控制
function openLibrary(action: any, productId: any) {
  let libraryData = {
    "action": action,
    "area": "wanderArea",
    "from": 7,
    "productId": productId
  }
  linkageControlAPP(libraryData).then((res: any) => {
    try {
      ElMessage.success(res.data.message);
    } catch (error) {
      ElMessage.error("调用失败！");
    }
  })
}

function tabClick() {

}



onMounted(async () => {
  handleQuery(); // 初始化数据
});




</script>

<template>
  <div class="app-container">

    <div class="contant-box">
      <el-tabs tab-position="top" type="border-card" @tab-click="tabClick">
        <el-tab-pane label="设备控制">
          <div class="mb5">
            <el-button class="title-botton" @click="openLibrary('on', 2)">灯光开</el-button>
            <el-button class="title-botton" @click="openLibrary('off', 2)">灯光关</el-button>
            <el-button class="title-botton" @click="openLibrary('on', 1)">投影开</el-button>
            <el-button class="title-botton" @click="openLibrary('off', 1)">投影关</el-button>
            <el-button class="title-botton" @click="openLibrary('on', 3)">中控主机开</el-button>
            <el-button class="title-botton" @click="openLibrary('off', 3)">中控主机关</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="数字内容">
          <div class="mb5">
            <div v-if="screenData.backDataByType && screenData.backDataByType.length > 0">
              <div v-for="item in screenData.backDataByType" :key="item.id">
                <div v-if="item.type == '4'" class="ctn-box">
                  <div class="title-box">数字人</div>
                  <div class="sample-box">
                    <div v-if="item.backData && item.backData.length > 0" class="botton-box">
                      <el-button class="title-botton" type="success" v-for="(btn, indexs) in item.backData" :key="btn"
                        @click="OpenDigiman(btn)">{{ btn.title }}
                      </el-button>
                    </div>
                  </div>
                </div>
                <div v-if="item.type == '2'" class="ctn-box">
                  <div class="title-box">视频</div>
                  <div class="sample-box">
                    <div v-if="item.backData && item.backData.length > 0" class="botton-box">
                      <el-button class="title-botton" type="success" v-for="(btn, indexs) in item.backData" :key="btn"
                        @click="OpenResoure(btn, 'serverVideo')">{{ btn.title }}
                      </el-button>
                    </div>
                  </div>
                  <!-- <el-button class="title-botton" type="primary"
                    @click="handleControl('open', 'serverVideo')">打开</el-button> -->
                  <el-button class="title-botton" type="primary"
                    @click="handleControl('close', 'serverVideo')">关闭</el-button>
                  <el-button class="title-botton" type="primary"
                    @click="handleControl('resume', 'serverVideo')">播放</el-button>
                  <el-button class="title-botton" type="primary"
                    @click="handleControl('pause', 'serverVideo')">暂停</el-button>
                  <el-button class="title-botton" type="primary"
                    @click="handleControl('mute', 'serverVideo')">静音</el-button>
                  <el-button class="title-botton" type="primary"
                    @click="handleControl('unMute', 'serverVideo')">取消静音</el-button>
                  <el-button class="title-botton" type="primary"
                    @click="handleControl('speed', 'serverVideo')">快进</el-button>
                  <el-button class="title-botton" type="primary"
                    @click="handleControl('rewind', 'serverVideo')">快退</el-button>
                </div>

                <div v-if="item.type == '3'" class="ctn-box">
                  <div class="title-box">PPT</div>
                  <div class="sample-box">
                    <div v-if="item.backData && item.backData.length > 0" class="botton-box">
                      <el-button class="title-botton" type="success" v-for="(btn, indexs) in item.backData" :key="btn"
                        @click="OpenResoure(btn, 'serverPPT')">{{ btn.title }}
                      </el-button>
                    </div>
                    <!-- <el-button class="title-botton" type="primary"
                      @click="handleControl('open', 'serverPPT')">打开</el-button> -->
                    <el-button class="title-botton" type="primary"
                      @click="handleControl('close', 'serverPPT')">关闭</el-button>
                    <el-button class="title-botton" type="primary"
                      @click="handleControl('prePage', 'serverPPT')">上一页</el-button>
                    <el-button class="title-botton" type="primary"
                      @click="handleControl('nextPage', 'serverPPT')">下一页</el-button>
                  </div>
                </div>

                <div v-if="item.type == '1'" class="ctn-box">
                  <div class="title-box">图片</div>
                  <div class="sample-box">
                    <div v-if="item.backData && item.backData.length > 0" class="botton-box">
                      <el-button class="title-botton" type="success" v-for="(btn, indexs) in item.backData" :key="btn"
                        @click="OpenResoure(btn, 'serverImage')">{{ btn.title }}
                      </el-button>
                    </div>
                    <!-- <el-button class="title-botton" type="primary"
                      @click="handleControl('open', 'serverImage')">打开</el-button> -->
                    <el-button class="title-botton" type="primary"
                      @click="handleControl('close', 'serverImage')">关闭</el-button>
                    <el-button class="title-botton" type="primary"
                      @click="handleControl('prePage', 'serverImage')">上一页</el-button>
                    <el-button class="title-botton" type="primary"
                      @click="handleControl('nextPage', 'serverImage')">下一页</el-button>
                  </div>
                </div>
                <div v-if="item.type == '5'" class="ctn-box">
                  <div class="title-box">待机logo</div>
                  <div class="sample-box">
                    <div v-if="item.backData && item.backData.length > 0" class="botton-box">
                      <el-button class="title-botton" type="success" v-for="(btn, indexs) in item.backData" :key="btn"
                        @click="OpenResoure(btn, 'serverImage')">{{ btn.title }}
                      </el-button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
      </el-tab-pane>

    </el-tabs>

  </div>
</div></template>
<style lang="scss" scoped>.botton-box {
  padding: 20px 0;
}

.title-box {
  padding-top: 20px;
}

.title-botton {
  min-width: 120px;
  height: 36px;
  line-height: 36px;
}</style>